<template>
  <view class="information-container">
    <view class="title">
      <text class="title-important">实时</text>资讯
      <!-- <view class="title-more">
        <up-icon name="arrow-right" color="#2979ff" size="24"></up-icon>
      </view> -->
    </view>
		<view class="list">
			<view class="list-item" v-for="(item, index) in dataList" :key="index">
				<image class="list-item-image" :src="item.image" />
				<view class="list-item-content">
					<view class="list-item-content-title">{{ item.title }}</view>
					<view class="list-item-content-time">{{ item.time }}</view>
				</view>
			</view>
			<!-- <uni-load-more :status="status" /> -->
		</view>
  </view>
</template>

<script setup>
	import { onLoad, onReachBottom } from "@dcloudio/uni-app"
	import { reactive, ref, onMounted } from 'vue';
  const preList = [
		{
			image: 'https://cdn.uviewui.com/uview/album/1.jpg',
			title: '汽车年检流程以及注意事项',
			time: '2024-05-20 14:30:06'
		},
		{
			image: 'https://cdn.uviewui.com/uview/album/2.jpg',
			title: '为什么有的加油站的油不耐烧?',
			time: '2024-05-18 18:46:02'
		},
		{
			image: 'https://cdn.uviewui.com/uview/album/3.jpg',
			title: '汽车第6年上线检测，年检实际操作流程，前后花了1小时搞定!',
			time: '2024-05-18 12:30:46'
		},
		{
			image: 'https://cdn.uviewui.com/uview/album/4.jpg',
			title: '高速公路恢复收费以后，这些问题要注意!',
			time: '2024-05-17 10:07:12'
		},
		{
			image: 'https://cdn.uviewui.com/uview/album/5.jpg',
			title: '异地违章新规即将实行!这些干货请收好!',
			time: '2024-05-17 09:36:06'
		}
  ];
	
	onMounted(() => {
		// console.log('111111111111111111111');
	  handleLoad();
	});
	
	onReachBottom(() => {
		pageIndex.value++;
		handleLoad()
	})
	
	const status = ref('more')
	const pageIndex = ref(1)
	const dataList = reactive([]);
	
	const handleLoad = () => {
		status.value = 'loading';
		if(pageIndex.value <= 3) {
			dataList.push(...preList);
			status.value = 'more';
		} else {
			status.value = 'noMore';
		}
		// console.log('dataList', dataList);
  };
</script>

<style lang="scss">
  .information-container {
    width: 100%;
    .title {
      position: relative;
      display: flex;
      align-items: center;
      height: 28px;
      font-weight: bold;
      color: $uni-text-color;

      &-important {
        color: $uni-color-primary;
      }

      &-more {
        position: absolute;
        right: 0;
      }

      &::before {
        content: '';
        margin-right: 6px;
        width: 4px;
        height: 100%;
        border-radius: 2px;
        background: $uni-color-gradient-blue;
      }

      &::after {
        content: 'NEWS';
        color: #1c85fe;
        opacity: 0.2;
        font-weight: bold;
        transform: translate(-10%, 30%);
      }
    }
		
		.list {
			&-item {
				display: flex;
				color: $uni-text-color;
				padding: 16px 12px;
				border-bottom: 1px solid #efefef;
				
				&-image {
					@include size(80px, 80px);
					border-radius: 8px;
				}
				
				&-content {
					flex: 1;
					margin-left: 12px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					
					&-title {
						font-size: 15px;
						font-weight: bold;
					}
					
					&-time {
						color: $uni-text-color-grey;
						font-size: 12px;
						text-align: right;
					}
				}
			}
		}
  }
</style>
